<template>
  <div class="wrap">
    <colorTitle
      title="魅力PPP"
      desc="国内首部PPP项目专题宣传片，由财政部PPP中心监制，中视财华拍摄制作"
    ></colorTitle>
    <div class="fixed-width charm-card" :style="{height:state.height+'px'}">
      <Card :cardList="charmList"></Card>
    </div>
    <div class="more-btn" @click="loadingMore">
      <img src="@/assets/images/ppp/bottom.png" alt="" v-if="!state.isDown"/>
      <img src="@/assets/images/ppp/top.png" alt="" v-else/>
    </div>
  </div>
</template>

<script setup lang="ts">
import colorTitle from "./colorTitle.vue";
import Card from "@/components/Card.vue";
import {reactive, toRefs, } from "vue";

const props = defineProps({
  charmList: {
    type: Array,
    default: [],
  },
});
const { charmList } = toRefs(props)

const state = reactive({
  isDown:false as any,
  height:""  as any,
  
})

// 加载更多
const loadingMore:any = () => {
  state.isDown = !state.isDown;
  if(charmList.value.length && state.isDown){
    const row = Math.ceil(charmList.value.length / 3); 
    state.height = row * 336;
    console.log(row)
  }else{
    state.height = 656
  }  
}

</script>

<style scoped>
.fixed-width {
  margin: 0 auto;
  width: 1440px;
}
.charm-card {
  margin-top: 50px;
  height:656px;
  transition: all ease-out 0.3s;
  overflow: hidden;
}

/*加载更多*/
.more-btn {
  position: relative;
  margin: 0 auto;
  margin-top: 75px;
  width: 296px;
  height: 46px;
  line-height: 46px;
  display: block;
  font-size: 14px;
  text-align: center;
  border: #c6c6c6 1px solid;
  border-radius: 12px;
  transition: all ease-out 0.3s;
  cursor: pointer;
}
.more-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 296px;
  height: 46px;
  line-height: 46px;
  border: 2px solid #626675;
  opacity: 0;
  transition: all 0.5s ease 0s;
  margin: 0 auto;
  text-align: center;
  transform: scale(1, 1);
  margin-left: -3px;
  border-radius: 90px;
}
.more-btn:hover {
  color: #5e5e5e;
  border-color: transparent;
}
.more-btn:hover::after {
  opacity: 1;
  transform: rotateX(180deg);
}
.more-btn img {
  display: inline-block;
  width: 19px;
  height: 14px;
}
</style>
